import React from 'react'
import {connect} from 'react-redux'
import F from 'lodash/fp'
import Sortable from 'sortablejs'
import Page from './card-page.jsx'
import {reOrder, switchTo} from '../actions/content-change'

const insert = (t, i, collection) => 
    F.compose(
        //头部
        F.concat(F.take(i, collection))
        //连接要插入的值t
        , F.concat(t)
        //尾部
        , F.slice(i, F.size(collection))
    )(collection)

const _delete = (i, collection) => F.concat(F.take(i, collection), F.slice(i + 1, F.size(collection), collection))

const handleDelete = (reOrder, i) => ev => {
    if (sortable.toArray().length === 1) return layer.alert('只剩最后一页了。')
    layer.confirm('你确定要删除此页吗？', function(index){
        reOrder(_delete(i, sortable.toArray()))
        layer.close(index)
    })
}

//禁用拖动时的默认样式
const disableDragImg = e => {
    e.dataTransfer.setDragImage(document.createElement('img'), 1, 1)
}

const Item = ({elements, i, switchTo, reOrder, activeIndex, id}) => {
    return (
        <li 
            className={"page-item "+(i === activeIndex ? 'selected' : '')} 
            data-id={id}
        >
            <Page elements={elements} onClick={switchTo.bind(this, i)} />
            <div className="num-list">{i + 1}</div>
            <i className="fa fa-files-o" onClick={() => reOrder(insert(id, i, sortable.toArray()))} />
            <i className="fa fa-trash" onClick={handleDelete(reOrder, i)} />
        </li>
    )
}

let sortable

class LeftPanel extends React.Component {

    componentDidMount() {
        if (!sortable) {
            sortable = new Sortable(
                document.querySelector('.page-list')
                , {
                    handle: ".page-item",
                    onSort: () => {
                        let selectedId = $('.selected').data('id')
                        , activeIndex = null
                        this.props.reOrder(sortable.toArray(), 'sortable')

                        for (let i = 0; i < this.props.pages.length; i ++) {
                            if (selectedId === this.props.pages[i].id) {
                                activeIndex = i
                            }
                        }
                        this.props.switchTo(activeIndex)
                    }
                }
            )
        }
    }

    render() {
        return (
            <div>
                { MODE === 'card' 
                ? <img 
                    src="/home/images/addButton.jpg"
                    className="add-page" 
                    data-am-modal="{target: '#add-page', closeViaDimmer: 1, width: 980, height: 580}"
                    onClick={() => $('#add-page .pages li').removeClass('selected')}
                /> 
                : null
                }
                <ul className="page-list">
                    {
                        this.props.pages.map((t, i) => <Item 
                            activeIndex={this.props.activeIndex} 
                            elements={t.elements} 
                            key={t.id}
                            i={i}
                            id={t.id}
                            switchTo={this.props.switchTo}
                            reOrder={this.props.reOrder} 
                        />)
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => state.card,
    (d, props) => (
        { reOrder: F.compose(d, reOrder)
        , switchTo: F.compose(d, switchTo)
    })
)(LeftPanel)